<template>
  <div
    class="flex items-center justify-between text-[#666666] text-[12px] select-none"
  >
    <div>
      <el-input
        v-model="groupState.name"
        placeholder="请输入"
        class="input-with-select"
        clearable
        @clear="handleRefresh"
        @keyup.enter="handleClickIcon"
      >
        <template #prepend>
          <el-select
            v-model="groupState.fieldStatus"
            placeholder="请选择"
            style="width: 96px"
          >
            <el-option
              v-for="item in operationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleClickIcon" />
        </template>
      </el-input>
    </div>
    <div>
      <el-button color="#376AF7" @click="handleCommand('create')"
        >新建分组</el-button
      >
      <el-button
        color="#2D61EE"
        class="bg-[#fff] text-[#2D61EE]"
        plain
        :icon="Delete"
        @click="handleCommand('delete', groupMultipleSelection)"
        >删除</el-button
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
import { get, isFunction } from 'lodash-es'
import {
  groupState,
  groupMultipleSelection,
  state,
  GROUP_OPERATION_LIST,
  GROUP_OPERATION_DATA,
  groupResetFunc
} from '../state'
import { ElMessageBox, ElNotification } from 'element-plus'
import { Search, Delete } from '@element-plus/icons-vue'
const emit = defineEmits(['refresh-list', 'create-group'])

const operationList = computed(() => GROUP_OPERATION_LIST)
const getBindField = computed(() => GROUP_OPERATION_DATA[state.fieldStatus])
const reset = () => {
  const field = getBindField.value
  const arr = ['name', 'remark']
  if (arr.includes(field)) {
    const newArr = arr
      .map(item => {
        if (item !== field) return item
      })
      .filter(Boolean)
    newArr.forEach((item: any) => (state[item] = ''))
  }
}
const handleRefresh = () => emit('refresh-list')
const handleClickIcon = () => {
  reset()
  emit('refresh-list')
}
const handleDeleteNode = (ids: string[]) => {
  if (groupMultipleSelection.value.length <= 0) {
    ElNotification.warning({
      title: '提示',
      message: '请至少选择一个分组进行删除'
    })
    return
  }
  ElMessageBox.confirm('确定要删除该节点吗？', '删除节点', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    closeOnClickModal: false,
    customClass: 'basic-message-box'
  }).then(() => {
    delete_groups({ ids })
      .then(() => {
        ElNotification.success({
          title: '成功',
          message: '删除成功'
        })
      })
      .finally(() => {
        emit('refresh-list')
      })
  })
}
type ICommand = 'delete' | 'create'
const handleCommand = (command: ICommand, record?: any) => {
  const actions: Record<ICommand, () => void> = {
    create: (): void => {
      emit('create-group')
    },
    delete: (): void => {
      handleDeleteNode(record)
    }
  }
  if (isFunction(get(actions, command))) {
    actions[command]()
  }
}
//防抖
const antiShake = (time: number) => {
  return setTimeout(() => {
    console.log('防抖')
    emit('refresh-list')
  }, time)
}
let timer: any = null
watch(
  [() => groupState.name, () => groupState.remark],
  value => {
    console.log('value: ', value)
    clearTimeout(timer)
    timer = antiShake(300)
  },
  { deep: true, immediate: true }
)
onUnmounted(() => groupResetFunc())
</script>

<style lang="scss" scoped>
:deep(.el-select) {
  .el-input__inner {
    font-size: 12px;
    color: #333333;
  }
}
:deep(.el-button) {
  font-size: 12px;
}
</style>
